<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>首页</title>
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/sockjs.min.js"></script>
    <script src="/js/stomp.min.js"></script>
</head>
<body>
<div class="container" style="padding: 0">
    <div class="navbar navbar-default">
        <a class="navbar-brand" href="#">首页</a>
        <ul class="nav navbar-nav">
            <li><a href="/user/userlist.html" th:href="@{/user/list}">用户列表</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">个人中心</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                   aria-expanded="false">
                    <span th:text="${#httpServletRequest.remoteUser}"></span>
                    <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li>
                        <form action="/logout" method="post">
                            <button type="submit">退出</button>
                        </form>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="row" style="margin: 0">
        <div class="jumbotron">
            <h1>Hello, world!</h1>
            <p>这是第一个Springboot+Ebean的项目</p>
        </div>
    </div>
    <div class="row" style="margin: 0">
        <div class="jumbotron">
            <h1>测试websocket</h1>
            <button type="button" id="connect">连接</button>
            <p>连接状态：<span id="status"></span></p>
            <br/>
            <input type="text" value="" id="msg">
            <button type="button" id="send">发送</button>
            <hr/>
            <ul id="content">
            </ul>
        </div>
    </div>
</div>
</body>
<script>
    var stompClient = null;
    $("#connect").on("click", function () {
        connect();
    });

    $("#send").on("click", function () {
        stompClient.send("/ws/hello", {}, $("#msg").val());
    });

    var connect = function () {
        var socket = new SockJS('/my-ws');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            $("#status").html('Connected: ' + frame);
            stompClient.subscribe("/topic/hello", function (data) {
                var obj = JSON.parse(data.body);
                $("#content").append("<li>" + obj.username + "：" + obj.message + "</li>");
            })
        })
    };
</script>
</html>